<!DOCTYPE html>
<html>
<head>
    <title>Fig. 2.32 Electromagnetism Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General styling to mimic the textbook illustration
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round'; // For softer line ends
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define coordinates and dimensions ---
        const x_wire = 100;
        const y_wire_top = 40;
        const y_wire_bottom = 420;

        const r1_dist = 60;
        const loop_width = 120;
        const l_height = 150;

        const x_loop_left = x_wire + r1_dist;
        const x_loop_right = x_loop_left + loop_width;

        const y_loop_top = 150;
        const y_loop_bottom = y_loop_top + l_height;

        // --- Helper function for drawing an arrow ---
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            // Main line
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            // Arrowhead
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Drawing the components ---

        // 1. Infinite Wire (z-axis)
        ctx.beginPath();
        ctx.moveTo(x_wire, y_wire_bottom);
        ctx.lineTo(x_wire, y_wire_top);
        ctx.stroke();
        // Arrowhead for z-axis
        ctx.beginPath();
        ctx.moveTo(x_wire, y_wire_top);
        ctx.lineTo(x_wire - 6, y_wire_top + 12);
        ctx.moveTo(x_wire, y_wire_top);
        ctx.lineTo(x_wire + 6, y_wire_top + 12);
        ctx.stroke();
        // Labels for the wire
        ctx.font = 'italic bold 24px serif';
        ctx.fillText('z', x_wire - 20, y_wire_top);
        ctx.fillText('I', x_wire - 25, y_loop_top + l_height / 3);

        // 2. Rectangular Loop (sides without the voltmeter)
        ctx.beginPath();
        ctx.moveTo(x_loop_left, y_loop_bottom); // Start at bottom-left
        ctx.lineTo(x_loop_left, y_loop_top);   // Left side
        ctx.lineTo(x_loop_right, y_loop_top);  // Top side
        ctx.moveTo(x_loop_left, y_loop_bottom);// Back to bottom-left
        ctx.lineTo(x_loop_right, y_loop_bottom); // Bottom side
        ctx.stroke();

        // 3. Voltmeter
        const y_volt_center = y_loop_top + l_height / 2;
        const r_volt = 20;
        // Wires connecting to the voltmeter
        ctx.beginPath();
        ctx.moveTo(x_loop_right, y_loop_top);
        ctx.lineTo(x_loop_right, y_volt_center - r_volt);
        ctx.moveTo(x_loop_right, y_loop_bottom);
        ctx.lineTo(x_loop_right, y_volt_center + r_volt);
        ctx.stroke();
        // Voltmeter circle
        ctx.beginPath();
        ctx.arc(x_loop_right, y_volt_center, r_volt, 0, 2 * Math.PI);
        ctx.stroke();
        // Voltmeter labels
        ctx.font = 'bold 24px serif';
        ctx.fillText('V', x_loop_right, y_volt_center);
        ctx.font = 'italic bold 20px serif';
        ctx.textAlign = 'left';
        ctx.fillText('a', x_loop_right + 8, y_volt_center - r_volt - 8);
        ctx.fillText('b', x_loop_right + 8, y_volt_center + r_volt + 8);
        ctx.textAlign = 'center'; // Reset alignment

        // 4. Dimension Lines (with thinner lines)
        ctx.lineWidth = 2;
        // Dimension for 'l'
        const x_dim_l = x_loop_left - 30;
        ctx.beginPath();
        ctx.moveTo(x_dim_l, y_loop_top);
        ctx.lineTo(x_dim_l, y_loop_bottom);
        ctx.moveTo(x_dim_l - 5, y_loop_top); // Top T-end
        ctx.lineTo(x_dim_l + 5, y_loop_top);
        ctx.moveTo(x_dim_l - 5, y_loop_bottom); // Bottom T-end
        ctx.lineTo(x_dim_l + 5, y_loop_bottom);
        ctx.stroke();
        ctx.font = 'italic bold 24px serif';
        ctx.fillText('l', x_dim_l - 20, y_volt_center);

        // Dimension for 'r1'
        const y_dim_r1 = y_loop_bottom + 40;
        ctx.beginPath();
        ctx.moveTo(x_wire, y_dim_r1);
        ctx.lineTo(x_loop_left, y_dim_r1);
        ctx.moveTo(x_wire, y_dim_r1 - 5); // Left T-end
        ctx.lineTo(x_wire, y_dim_r1 + 5);
        ctx.moveTo(x_loop_left, y_dim_r1 - 5); // Right T-end
        ctx.lineTo(x_loop_left, y_dim_r1 + 5);
        ctx.stroke();
        // Label for 'r1' with subscript
        const x_label_r1 = x_wire + r1_dist / 2;
        ctx.font = 'italic bold 24px serif';
        ctx.fillText('r', x_label_r1 - 5, y_dim_r1 + 20);
        ctx.font = 'italic bold 16px serif';
        ctx.fillText('1', x_label_r1 + 7, y_dim_r1 + 25);

        // Dimension for 'r2'
        const y_dim_r2 = y_loop_bottom + 70;
        ctx.beginPath();
        ctx.moveTo(x_wire, y_dim_r2);
        ctx.lineTo(x_loop_right, y_dim_r2);
        ctx.moveTo(x_wire, y_dim_r2 - 5); // Left T-end
        ctx.lineTo(x_wire, y_dim_r2 + 5);
        ctx.moveTo(x_loop_right, y_dim_r2 - 5); // Right T-end
        ctx.lineTo(x_loop_right, y_dim_r2 + 5);
        ctx.stroke();
        // Label for 'r2' with subscript
        const x_label_r2 = x_wire + (r1_dist + loop_width) / 2;
        ctx.font = 'italic bold 24px serif';
        ctx.fillText('r', x_label_r2 - 5, y_dim_r2 + 20);
        ctx.font = 'italic bold 16px serif';
        ctx.fillText('2', x_label_r2 + 7, y_dim_r2 + 25);
        
        // 5. Velocity Vector 'u'
        ctx.lineWidth = 3; // Reset line width
        const y_u_vector = y_loop_top - 50;
        const x_u_start = x_loop_left + loop_width/2 - 25;
        const x_u_end = x_u_start + 60;
        drawArrow(ctx, x_u_start, y_u_vector, x_u_end, y_u_vector);
        ctx.font = 'italic bold 24px serif';
        ctx.textAlign = 'left';
        ctx.fillText('u', x_u_end + 10, y_u_vector);
        ctx.textAlign = 'center'; // Reset alignment

        // 6. Figure Caption
        ctx.font = 'bold 24px serif';
        ctx.fillText('Fig. 2.32', canvas.width / 2, 470);

    </script>
</body>
</html>